<template>
	<view class="warpper">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">对比结果</block>
		</cu-custom>
		
		<view class="padding">
			<view class="charts-box bg-white radius-lg margin-bottom padding">
				<!-- #ifdef MP-WEIXIN -->
				<qiun-data-charts :canvas2d="true" type="column" :opts="opts" :chartData="chartData" />
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				<!-- #endif -->
			</view>

			<view class="bg-white radius-lg padding-xs">
				<view class="flex justify-between align-center bg-white solid-bottom padding-bottom-sm padding-lr-xs">
					<view class="action text-lg text-bold">
						<text class="cuIcon-titles text-blue"></text>工资对比
					</view>
					<view class="action">
						<text class="text-sm text-gray">累计公司社保/公积金</text>
						<switch style="transform:scale(0.8)" class="sm" :class="isContainsCompany?'checked':''" :checked="isContainsCompany?true:false" @change="changeContainsCompany"></switch>
					</view>
				</view>
				<basic-table :columns="columns" :data="tableData">
				</basic-table>
			</view>
		</view>
	</view>
</template>

<script>
	import BasicTable from '@/components/basic-table/basic-table.vue';
	import {
		accMul,
		accAdd,
		accDiv
	} from '@/utils/common'
	export default {
		components: {
			BasicTable
		},
		data() {
			return {
				tableData: [{
					name: '月薪'
				}, {
					name: '社保缴纳'
				}, {
					name: '公积金缴纳'
				}, {
					name: '年终奖'
				}, {
					name: '总收入'
				}, {
					name: '累计纳税'
				}, {
					name: '到手金额'
				}],
				columns: [{
					fieldName: 'name',
					fieldDesc: '对比项名称',
					fixed: 'left'
				}],
				isContainsCompany: false,
				opts: {
					color: ["#FF6F5D", "#F64250"],
					dataLabel: true, //不显示图表区域内数据点上方的数据文案
					legend: {
						position: "top", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
						float: "right",
						margin: 10, //图例外侧填充边距
					},
					xAxis: {
						axisLine: false,
						boundaryGrid: 'justify',
						fontColor: "#999",
						gridType: "dash",
						gridColor: "#DFE3EB",
						scrollShow: false,
							//x轴文字倾斜
						rotateLabel:true
					},
					yAxis: {
						showTitle: true,
						data: [{
							title: "万元",
							fontColor: "#999",
							titleFontColor: "#999",
							axisLineColor: "#DFE3EB",
							titleOffsetY: -5,
							titleOffsetX: -12
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 12,
							linearType: "custom",
							customColor: ["#F64250", "#FF885D"],
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						},
						tooltip: { //提示窗
							showArrow: false, //是否显示箭头
							borderRadius: 4, //圆角大小
							bgOpacity: 0.6, //背景色透明度
						}
					}
				},
				chartData: {},
				compareNameCheckeds: []
			};
		},
		created() {
			
		},
		onLoad(options) {
			this.compareNameCheckeds = JSON.parse(decodeURIComponent(options.compareNameCheckeds))
			this.initData()
		},
		methods: {
			initData() {
				const compareNameCheckeds = this.compareNameCheckeds
				const storageCompareList = uni.getStorageSync('storage_compareList');
				const chartData = {
					categories: [],
					series: [{
						name: "年收入",
						data: []
					}]
				};
				this.resetTable()
				let count = 1
				for (const key in storageCompareList) {
					if (compareNameCheckeds.indexOf(key) < 0) {
						continue;
					}
					const curCompareItem = storageCompareList[key];
					this.columns.push({
						fieldName: 'column' + count,
						fieldDesc: key
					})
					chartData.categories.push(key)
					const salarySummary = curCompareItem.salarySummary
					chartData.series[0].data.push(salarySummary.summaryAmount)
					this.tableData[0]['column' + count] = curCompareItem.totalAmount
					this.tableData[1]['column' + count] = this.isContainsCompany ? salarySummary.annualSocialAmount : salarySummary.annualPersonalSocialAmount
					this.tableData[2]['column' + count] = this.isContainsCompany ? salarySummary.annualHousingAmount : salarySummary.annualPersonalHousingAmount
					this.tableData[3]['column' + count] = salarySummary.yearEndBoundAmount || '--'
					this.tableData[4]['column' + count] = salarySummary.summaryAmount
					this.tableData[5]['column' + count] = salarySummary.summaryTaxAmount
					this.tableData[6]['column' + count] = salarySummary.summaryEarnedAmount
					count++;
				}
				this.chartData = JSON.parse(JSON.stringify(chartData));
			},
			changeContainsCompany() {
				this.isContainsCompany = !this.isContainsCompany
				this.initData()
			},
			resetTable() {
				this.tableData = [{
					name: '月薪'
				}, {
					name: '社保缴纳'
				}, {
					name: '公积金缴纳'
				}, {
					name: '年终奖'
				}, {
					name: '总收入'
				}, {
					name: '累计纳税'
				}, {
					name: '到手金额'
				}]
				this.columns = [{
					fieldName: 'name',
					fieldDesc: '对比项名称',
					fixed: 'left'
				}]
			}
		}
	}
</script>

<style>
</style>